@include b(chart-pql-editor-modal) {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

@include b(chart-pql-editor-modal-header) {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 getCssVar('spacing', 'extra-loose');
}

@include b(chart-pql-editor-modal-content) {
  flex: 1 1 0;
  padding: 0 getCssVar('spacing', 'extra-loose');
}

@include b(chart-pql-editor-modal-footer) {
  display: flex;
  justify-content: flex-end;
  height: 68px;
  padding: getCssVar('spacing', 'base') getCssVar('spacing', 'extra-loose');
}

@include b(pql-editor-suggestion-item) {
  @include b(chart-pql-editor-modal-item) {
    @include e(icon) {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      margin-right: getCssVar('spacing', 'tight');
      font-size: getCssVar('font-size', 'header-6');
      color: getCssVar(color, link, hover);
    }

    @include e(text) {
      flex: 1 1 0;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
